<template>

  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection"/>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, toRefs} from 'vue';
import {getMenus} from "@/http/mockTest";


const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'perms',
    dataIndex: 'perms',
    key: 'perms',

  },
  {
    title: 'path',
    dataIndex: 'path',
    key: 'path',

  },
  {
    title: 'component',
    dataIndex: 'component',
    key: 'component',

  },
  {
    title: 'parentId',
    dataIndex: 'parentId',
    key: 'parentId',
  },
];


const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: any, selected: boolean, selectedRows: any) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
    console.log(selected, selectedRows, changeRows);
  },
});

export default defineComponent({
  setup() {
    const state = reactive({
      data: []
    })
    getMenus().then((res: any) => {
      state.data = res
    })

    return {
      ...toRefs(state),
      columns,
      rowSelection,
    };
  },
});
</script>

